import React from 'react';
import api from '../../api';
class WriteMsg extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            msgData: [],
            msgGetErrMsg: "",
            nowMsgPwd: "",
            nowMsgStr: ""
        }
    }
    nowMsgPwdChane = (e) => {
        let nowMsgPwd = e.target.value
        this.setState({
            nowMsgPwd
        })
        // console.log(this.state.nowMsgPwd)
    }
    nowMsgStrChane = (e) => {
        let nowMsgStr = e.target.value
        this.setState({
            nowMsgStr
        })
        // console.log(this.state.nowMsgStr)
    }
    writeMsg(msgPwd, msgStr) {
        return new Promise((resolve, reject) => {
            api.post('/api/write-msg',
                {
                    "msgPwd": msgPwd,
                    "msg": msgStr
                }).then((res) => {
                    // console.log(res)
                    let { msg } = res.data;
                    console.log(res.data)
                    if (msg === "success") {
                        resolve("留言发布成功")
                        // console.log(this.state.msgData)
                    } else {
                        // this.setState({
                        //     msgGetFlagMsg: 
                        // })
                        resolve("留言失败，请稍后再试\n" + msg)
                    }
                })
        })
    }
    msgWriteBtnFn = async () => {
        if (this.state.nowMsgPwd === "" || this.state.nowMsgStr === "") {
            alert('内容不可为空')
            return
        }
        try {
            let res = await this.writeMsg(this.state.nowMsgPwd, this.state.nowMsgStr)
            alert(res)
        } catch (error) {
            this.state.msgGetErrMsg = error
        } finally {
        }
    }
    async componentDidMount() {
        // console.log('DidMount========')

    }
    render() {
        return (
            <div className="massage-wraper">
                {/* <div className='msg-float'>
                    <div className='p-wraper'>
                        <p className="text-float">人生必有坎坷和挫折!挫折是成功的先导，不怕挫折比渴望成功更可贵。</p>
                        <p className='text-float float-delay-1'>这个世界至少有一个地方你可以控制——你的心境。</p>
                        <p className='text-float float-delay-3'>对你，不管阴晴圆缺，也不变。</p>
                        <p className='text-float float-delay-4'>你给的世界,满满的都是爱。</p>
                    </div>
                </div> */}
                <section>
                    <div className='msg-input'>
                        <input
                            type="text"
                            placeholder='输入留言暗号'
                            defaultValue={this.state.nowMsgPwd}
                            onChange={this.nowMsgPwdChane} />
                        <textarea
                            auto-height="true"
                            type="text"
                            placeholder='输入留言内容'
                            defaultValue={this.state.msgStr}
                            onChange={this.nowMsgStrChane} />
                        <button onClick={this.msgWriteBtnFn}>保存留言</button>

                    </div>
                    <div className='msg-show'>
                        <ul>
                            {this.state.msgData.map(msg => (<li key={msg.id}>
                                <i></i>
                                <div className='msg-time'>
                                    <span className='time'>{msg.dateTime}</span>
                                    <text className='msg'>{msg.msg}</text>
                                </div>
                            </li>)
                            )
                            }
                        </ul>
                    </div>
                </section>

            </div>)
    }
}

export default WriteMsg
